<template>
  <van-button
    class="theme-button"
    :class="{
      'theme-button--disabled': disabled,
    }"
    :color="computedOverrideColor"
    :round="round"
    :disabled="disabled"
    @click="handleButtonClick"
    >{{ buttonText }}</van-button
  >
</template>

<script lang="ts">
import { computed, defineComponent } from '@vue/composition-api'
import { Button as VanButton } from 'vant'
import { throttle } from '@/utils/instrument'

export default defineComponent({
  components: {
    VanButton,
  },
  props: {
    buttonText: {
      type: String,
      required: true,
    },
    disabled: {
      type: Boolean,
      default: false,
    },
    round: {
      type: Boolean,
      default: true,
    },
    overrideColor: {
      type: String,
      default: '',
    },
  },
  setup(props, { emit }) {
    const handleButtonClick = throttle(() => {
      emit('click')
    }, 300)
    const computedOverrideColor = computed(() => {
      if (props.disabled) {
        return ''
      }
      return props.overrideColor
    })
    return { handleButtonClick, computedOverrideColor }
  },
})
</script>

<style lang="scss" scoped>
@import 'index';
</style>
